<template>
	<lay-container fluid="true" style="padding: 10px">
		<lay-row>
			<lay-col :md="24">
				<lay-card>
					<lay-form style="margin: 0px; padding: 0px;">
						<lay-space>
							<!-- <lay-form-item style="margin: 0px;">
								<lay-input style="width: 180px" size="sm" :allow-clear="true" placeholder="关键词"
									v-model="page.SearchaAtistop"></lay-input>
							</lay-form-item> -->

							<lay-form-item style="margin: 0px;">
								<lay-button size="sm" type="primary"
									@click="cls_List_ubmitx('off')">生成收缩JSON</lay-button>
							</lay-form-item>
							<lay-form-item style="margin: 0px;">
								<lay-button size="sm" type="primary"
									@click="cls_List_ubmitx('on')">生成展开JSON</lay-button>
							</lay-form-item>
						</lay-space>
					</lay-form>
				</lay-card>
			</lay-col>
			<lay-col :md="24">
				<lay-row space="4">
					<!-- 分类树 -->
					<div>
						<lay-tree :data="treeData" :onlyIconControl="true">
							<template #title="{ data }">
								<lay-dropdown trigger="contextMenu" updateAtScroll>
									<span @click="openRightDrawer(data)"> {{ data.title }} </span>
									<template #content>
										<lay-dropdown-menu>
											<lay-dropdown-menu-item @click="addWindow('new', data)">
												<template #prefix><lay-icon
														type="layui-icon-list"></lay-icon></template>
												<template #default>新增</template>
											</lay-dropdown-menu-item>
											<lay-dropdown-menu-item @click="addWindow('up', data)">
												<template #prefix><lay-icon
														type="layui-icon-set-sm"></lay-icon></template>
												<template #default>编辑</template>
											</lay-dropdown-menu-item>
										</lay-dropdown-menu>
									</template>
								</lay-dropdown>
							</template>
						</lay-tree>
					</div>
				</lay-row>
			</lay-col>
		</lay-row>
	</lay-container>
	<!-- 弹窗 -->
	<sonWindow ref="sonWindowRef" @topClick="topFn" />
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import MyModal from './MyModal.vue';
import { layer } from "@layui/layer-vue";
import sonWindow from "./module/indexWindow.vue";
import { GoodsClsList, GoodsClsListJSON } from "../../../../../api/module/user"; //请求模块



const treeData = ref([]);//分类树数据

//监听子组件
const topFn = function (db: any) {
	console.log("我的父组件中的方法", db);
	// ListSubmit()
	cls_List_ubmit()
};



const List_pread = ref({
	spread: "off",// 查询的树是否展开 off 为收缩，其它 为展开
});
/** JSON版本分类树渲染 */
const cls_List_ubmit = async () => {
	treeData.value = [];
	layer.load(0, { time: 0 })
	let data = await GoodsClsListJSON(List_pread.value);
	console.log("JSON版本分类树渲染-HTTP回调", data);
	if (data.code == 200) {
		treeData.value = data.cateTree.txt_json;//数据集
	} else {
		layer.msg(data.msg, { icon: 2 });
	}
	layer.closeAll()

};

/** 分类树生成JSON */
const cls_List_JSON = async () => {
	treeData.value = [];
	layer.msg("成时间较长，请耐心等待自动化完成。", { icon : 16, time: 0})
	let data = await GoodsClsList(List_pread.value);
	console.log("分类树生成JSON-HTTP回调", data);
	if (data.code == 200) {
		cls_List_ubmit()
	} else {
		layer.msg(data.msg, { icon: 2 });
	}
	layer.closeAll()

};




function cls_List_ubmitx(db: string) {
	List_pread.value.spread = db;
	console.log(List_pread.value.spread);

	cls_List_JSON();
}




const sonWindowRef = ref<InstanceType<typeof MyModal> | null>(null)
// 打开弹窗
const addWindow = function (op: string, data: any) {
	// console.log("点击:", data);
	const data_bs = {
		"id": data.id,
		"i": data.i,
		"level": data.level,
		"name": data.name,
		"pid": data.pid,
		"title": data.title
	};
	console.log("父窗口传送", op, data_bs);
	// op='up'//修改模式
	// op='new'//新增模式
	sonWindowRef.value?.childFun(op, data_bs, treeData.value);//子组件方法
};
// 左击弹层看明细
function openRightDrawer(txt: any) {
	// console.log(txt);
	layer.drawer({
		// time:3000,//关闭时间
		isHtmlFragment: true,//解析 html 字符
		title: "详情",// 标题
		content: '<div style="padding: 10px;">' +
			'<br/>父级编号:' + '[' + txt.pids + ']' +
			'<br/>子级编号:' + '[' + txt.ids + ']' +
			'<br/>类别编号:' + txt.id +
			'<br/>类别名称:' + txt.name +
			'<br/>排序权重:' + txt.i +
			'<br/>所在层级:' + txt.level +
			'<br/>提示:<br/>--[排序权重]的数值越大，类别排列越前。' +
			'</div>',//内容
		offset: "r"//弹出位置
	});
}


onMounted(() => {
	cls_List_ubmit();
	// console.log(bbs);
})
</script>
